<div class="modal-header">
    <h4 ng-show="ui.person.first_login == 0">プロファイルの編集</h4>
    <div class="alert alert-info" role="alert" ng-show="ui.person.first_login">
        必要な初期設定をおこなってください。
    </div>
</div>
<div class="modal-body">
    <form class="form-horizontal" role="form" name="personForm" novalidate>
        <div class="form-group">
            <label class="control-label col-sm-3">名前</label>
            <div class="col-sm-9">
                <input class="form-control" type="text" ng-model="ui.person.display_name" placeholder="名前" ng-required="true"></input>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">生年月日</label>
            <div class="col-sm-9">
                <p class="input-group form-person-birthday-for-desktop">
                    <input type="text" class="form-control" uib-datepicker-popup ng-model="ui.person.birthday" is-open="ui.birthdayPickerOpen" datepicker-options="dateOptions" ng-required="true" show-button-bar="false" />
                    <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="toggleBirthdayPicker()"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
                <input type="date" class="form-control form-person-birthday-for-mobile" ng-model="ui.person.birthday" ng-required="true"></input>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">性別</label>
            <div class="col-sm-9">
                <label class="radio-inline">
                    <input type="radio" value="male" ng-model="ui.person.sex" ng-required="true"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" value="female" ng-model="ui.person.sex" ng-required="true"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">身長</label>
            <div class="col-sm-9">
                <input class="form-control" type="number" ng-model="ui.person.height" placeholder="身長" ng-required="true"></input>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">活動量</label>
            <div class="col-sm-9">
                <label class="radio-inline">
                    <input type="radio" value=1 ng-model="ui.person.activity"  ng-required="true"> 1 弱
                </label>
                <label class="radio-inline">
                    <input type="radio" value=2 ng-model="ui.person.activity"  ng-required="true"> 2 中
                </label>
                <label class="radio-inline">
                    <input type="radio" value=3 ng-model="ui.person.activity"  ng-required="true"> 3 強
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">アイコンURL</label>
            <div class="col-sm-9">
                <input class="form-control" type="text" ng-model="ui.person.picture_url" placeholder="アイコンURL"></input>
            </div>
        </div>
    </form>
    <div class="alert alert-danger" ng-show="ui.alertList.length > 0">
        <ul>
            <li ng-repeat="alert in ui.alertList">{{alert}}</li>
        </ul>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="$dismiss()" ng-disabled="ui.remoting.isRemoting">キャンセル</button>
    <button class="btn btn-primary" type="button" ng-click="updatePerson(ui.person)" ng-disabled="ui.remoting.isRemoting || personForm.$invalid">
        <span class="glyphicon glyphicon-ok" ng-show="!ui.remoting.isRemoting"></span>&nbsp;{{(ui.remoting.isRemoting) ? '更新中...' : '更新'}}
    </button>
</div>
